<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/styles.css"> <!-- 自定义样式 -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</head>

<body>
    <!-- 容器用于居中显示 -->
    <div class="center-container">
        <!-- 信息方框 -->
        <div class="info-box">
            <h2>个人信息</h2>

            <!-- 显示用户头像 -->
            <div class="profile">
                <img id="profilePicture" src="pic/cat.png" alt="用户头像" class="img-thumbnail" width="150">
                <h3 id="userName">用户名</h3>
            </div>

            <!-- 显示用户详细信息 -->
            <div class="user-info">
                <div>
                    <label>用户名: </label><span id="userNameDetail">用户名</span>
                </div>
                <div>
                    <label>创建时间: </label><span id="userCreateTime"></span>
                </div>
            </div>

            <!-- 修改个人信息按钮 -->
            <button class="btn btn-primary" onclick="location.href='edit_profile.html'">修改个人信息</button>

            <!-- 注销按钮 -->
            <button class="btn btn-danger" onclick="logout()">注销</button>
        </div>
    </div>

    <script>
        // 页面加载时，调用 common.js 中的 getUserInfo 函数
        var url = "/user/getUserInfo"; // 后端接口地址
        getUserInfo(url); // 直接调用 common.js 中的 getUserInfo 函数
    </script>
</body>

</html>
